<template>
  <div class="account">
    <el-container>
      <el-header>
        <el-breadcrumb>
          <el-breadcrumb-item>基础信息维护</el-breadcrumb-item>
          <el-breadcrumb-item>适用门店维护</el-breadcrumb-item>
          <el-breadcrumb-item>添加适用门店</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="供应商：">
            <el-col :span="6">
              <el-input v-model="ruleForm.supplierName" size="small" disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="适用门店组：">
            <el-col :span="6">
              <el-input v-model="ruleForm.shopGroup" size="small" disabled="true"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="门店名称：" prop="shopName">
            <el-col :span="6">
              <el-input v-model="ruleForm.shopName" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="门店地址：" required>
            <el-col :span="4">
              <el-form-item prop="province">
                <el-select
                  v-model="ruleForm.province"
                  size="small"
                  placeholder="省"
                  @change="updateProvince"
                >
                  <el-option
                    v-for="(item, index) in area"
                    :key="index"
                    :value="item.name"
                  >{{item.name}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin: 0 10px">
              <el-form-item prop="city">
                <el-select
                  v-model="ruleForm.city"
                  placeholder="市"
                  size="small"
                  @change="updateCity"
                >
                  <el-option
                    v-for="(item, index) in cityArr"
                    :key="index"
                    :value="item.name"
                  >{{item.name}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="county">
                <el-select v-model="ruleForm.county" placeholder="区" size="small">
                  <el-option v-for="(item, index) in countyArr" :key="index" :value="item">{{item}}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="15" style="margin-top: 5px">
              <el-form-item prop="detailAddress">
                <el-input size="small" v-model="ruleForm.detailAddress" placeholder="详细地址"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="门店所在经纬度">
            <el-col :span="6" style="margin-right: 10px">
              <el-input placeholder="请输入经度" size="small" v-model="ruleForm.coordinateX"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="请输入纬度" size="small" v-model="ruleForm.coordinateY"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="门店电话" prop="shopTel">
            <el-col :span="6">
              <el-input v-model="ruleForm.shopTel" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="营业时间">
            <el-col :span="6">
              <el-input v-model="ruleForm.shopOpenTime" size="small"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="门店营业情况" prop="shopStatus">
            <el-radio-group v-model="ruleForm.shopStatus">
              <el-radio label="正常"></el-radio>
              <el-radio label="已关闭"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        supplierName: "",
        shopGroup: "",
        shopName: "",
        province: "",
        city: "",
        county: "",
        detailAddress: "",
        coordinateX: "",
        coordinateY: "",
        shopTel: "",
        shopOpenTime: "",
        shopStatus: ""
      },
      rules: {
        shopName: [
          { required: true, message: "请输入门店名称", trigger: "blur" }
        ],
        shopTel: [
          { required: true, message: "请输入门店电话", trigger: "blur" }
        ],
        province: [
          { required: true, message: "请选择门店所在省", trigger: "change" }
        ],
        city: [
          { required: true, message: "请选择门店所在市", trigger: "change" }
        ],
        county: [
          { required: true, message: "请选择门店所在区", trigger: "change" }
        ],
        detailAddress: [
          { required: true, message: "请输入门店详细地址" }
        ],
        shopStatus: [
          { required: true, message: "请选择门店营业情况", trigger: "change" }
        ]
      },
      area: [
        {
          name: "北京",
          sub: [
            {
              name: "北京",
              sub: ["大兴区", "东城区", "朝阳区"]
            }
          ]
        },
        {
          name: "四川省",
          sub: [
            {
              name: "成都市",
              sub: ["双流区", "新都区", "成华区", "高新区", "青羊区", "锦江区"]
            },
            {
              name: "遂宁市",
              sub: ["船山区", "大英县", "安居区", "射洪县", "蓬溪县"]
            },
            {
              name: "自贡市",
              sub: ["大安区", "自流井区", "贡井区", "沿滩区", "荣县", "富顺区"]
            },
            {
              name: "泸州市",
              sub: [
                "江阳区",
                "纳溪区",
                "龙马潭区",
                "泸县",
                "合江县",
                "叙永县",
                "古蔺区"
              ]
            }
          ]
        },
        {
          name: "广东省",
          sub: [
            {
              name: "广州市",
              sub: ["越秀区", "荔湾区", "天河区", "海珠区", "黄埔区"]
            },
            {
              name: "深圳市",
              sub: ["福田区", "南山区", "宝安区", "龙岗区"]
            },
            {
              name: "珠海市",
              sub: ["香洲区", "金湾区"]
            },
            {
              name: "汕头市",
              sub: ["金平区", "濠江区", "潮南区", "龙湖区"]
            },
            {
              name: "佛山市",
              sub: ["禅城区", "三水区", "南海区"]
            }
          ]
        },
        {
          name: "上海市",
          sub: [
            {
              name: "上海市",
              sub: [
                "普陀区",
                "静安区",
                "杨浦区",
                "黄浦区",
                "南汇区",
                "嘉定区",
                "徐汇区"
              ]
            }
          ]
        }
      ],
      province: [],
      cityArr: [],
      countyArr: []
    };
  },
  methods: {
    // 省市区三级联动
    updateProvince(val) {
      this.ruleForm.city = "";
      this.ruleForm.county = "";
      this.cityArr = [];
      this.countyArr = [];
      this.area.map(e => {
        if (val === e.name) {
          this.cityArr = e.sub;
        }
      });
    },
    updateCity(val) {
      this.ruleForm.county = "";
      this.countyArr = [];
      this.cityArr.map(e => {
        if (val === e.name) {
          this.countyArr = e.sub;
        }
      });
    }
  }
};
</script>

<style scoped>
.account .el-header {
  height: 60px;
  border-bottom: 1px solid #f3f3f3;
}
.el-breadcrumb {
  height: 60px;
  line-height: 60px;
}
.main-header {
  text-align: center;
  align-items: center;
  display: flex;
}
.main-header >>> .el-input {
  width: 200px;
  margin-right: 20px;
}
.main-content {
  margin: 40px;
}
.el-footer {
  margin: 0 auto;
}
</style>